// import TTable, { TTd ,TTh, TTr } from 't/basic/table';

import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, pickOwnForBasicComponent } from 't/common/utils';
import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
import { useQuasar } from '@teld/q-components';

import TLabel from 't/basic/label';
import TSelect from 't/basic/select';
import TItem from 't/basic/item';
import TItemSection from 't/basic/item-section';
import TItemLabel from 't/basic/item-label';
import TIcon from 't/basic/icon';
import { QToggle } from '@teld/q-components/Toggle';

export default defineComponent({
  directives: {
    removeTabindex: {
      mounted(el) {
        // 移除 tabindex 属性
        el?.removeAttribute('tabindex');
      },
    },
  },
  props: {
    selectOpts: { type: Array, default: () => [] },
    lang: {
      type: Function,
    },
    modelValue: {
      type: Array[String],
      default() {
        return [];
      },
    },
  },
  emits: ['update:modelValue'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const lang = props.lang;

    const publicMethod = {};
    const selectOpts = computed(() => {
      return props.selectOpts;
    });
    const [mappingProps, mappingExpose] = useMappingProps(props, publicMethod);

    const value = computed(() => {
      return mappingProps.value;
    });

    expose(mappingExpose);

    const model = ref([]);
    return () => {
      return (
        <div class={'t-popup-filter-default-filter'}>
          <div class='t-popup-filter-default-filter-title'>
            <TLabel
              valueType='static'
              showHint='true'
              constValue={lang('defaultCondition')}
            ></TLabel>
          </div>
          <div class='t-popup-filter-default-filter-select'>
            {true && (
              <TSelect
                modelValue={props.modelValue}
                onUpdate:modelValue={val => emit('update:modelValue', val)}
                itemsDataSourceType='static'
                hideLabel='true'
                clearable='true'
                useInput='true'
                helpPlacement='bottom'
                readonly='false'
                labelPosition='top'
                optionsPosition='top'
                multiple
                // borderless
                staticItems={selectOpts.value}
              >
                {{
                  option({ itemProps, opt, selected, toggleOption }) {
                    return (
                      <TItem {...itemProps}>
                        <TItemSection>
                          <TItemLabel v-html={opt.label} />
                        </TItemSection>
                        <TItemSection side>
                          <QToggle
                            modelValue={selected}
                            onUpdate:modelValue={() => toggleOption(opt)}
                          />
                        </TItemSection>
                      </TItem>
                    );
                  },
                }}
              </TSelect>
            )}
          </div>
        </div>
      );
    };
  },
});
